/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Grid, Input, Select, DatePicker, Button } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';

const { Row, Col } = Grid;

export default class DutyShiftTableFilter extends Component {
  static displayName = 'DutyShiftTableFilter';

  static propTypes = {
    setFilter: PropTypes.func,
  };

  static defaultProps = {
    setFilter: () => {}
  };

  constructor(props) {
    super(props);
    this.state = {
      value: {},
    };
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  handleSearch(e) {
    e.preventDefault();
    let { value } = this.state;
    this.props.setFilter({
      keyword: value.keyword,
      createdAtStart: value.createdAtStart ? value.createdAtStart.unix() : null,
      createdAtEnd: value.createdAtEnd ? value.createdAtEnd.unix() : null,
    })
  }

  render() {
    return (
      <div>
        <Row>
          <Col>
            <IceFormBinderWrapper
              value={this.state.value}
              onChange={this.formChange}
              ref="form"
            >
              <Row wrap gutter="20" style={styles.formRow}>
                <Col l="5">
                  <div style={styles.formItem}>
                    <span style={{
                      ...styles.formLabel,
                      minWidth: '50px',
                    }}>搜索：</span>
                    <IceFormBinder triggerType="onBlur" name="keyword">
                      <Input
                        onPressEnter={this.handleSearch.bind(this)}
                        placeholder="请输入"
                        size="medium"
                      />
                    </IceFormBinder>
                    <div style={styles.formError}>
                      <IceFormError name="keyword" />
                    </div>
                  </div>
                </Col>
                <Col l="6">
                  <div style={styles.formItem}>
                    <span style={styles.formLabel}>起始日期：</span>
                    <IceFormBinder triggerType="onBlur" name="createdAtStart">
                      <DatePicker size="medium" />
                    </IceFormBinder>
                    <div style={styles.formError}>
                      <IceFormError name="createdAtStart" />
                    </div>
                  </div>
                </Col>
                <Col l="6">
                  <div style={styles.formItem}>
                    <span style={styles.formLabel}>结束日期：</span>
                    <IceFormBinder triggerType="onBlur" name="createdAtEnd">
                      <DatePicker size="medium" />
                    </IceFormBinder>
                    <div style={styles.formError}>
                      <IceFormError name="createdAtEnd" />
                    </div>
                  </div>
                </Col>
                <Col l="3" style={{ paddingLeft: 0 }}>
                  <div style={styles.formItem}>
                    <Button type='primary' onClick={ this.handleSearch.bind(this) }>查询</Button>
                  </div>
                </Col>
              </Row>
            </IceFormBinderWrapper>
          </Col>
        </Row>
      </div>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0',
  },
  title: {
    margin: '0',
    padding: '20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  formRow: {
    padding: '10px 20px',
    margin: 0
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
  formLabel: {
    minWidth: '75px',
  },
};
